<template>
	<view>
		<!-- <my-custom bgColor="bgfff" :isBack="true">
			<view slot="content">
				<view class="dsf alc jcc h100b col333 fwb">{{''+$root.m0+''}}</view>
			</view>
		</my-custom> -->
		<view class="pt24 pl24 pr24">
			<view v-if="list.length==0">
				<u-empty marginTop="90" text="无数据"></u-empty>
			</view>



			<view  class="wbg mb24 pl24 " style="overflow:hidden;border-radius:16upx;" :index="index"
				v-for="(item,index) in list">
				<view class="touxiang pr10 relative">
					<image  @click="$go('newdriver/index?id='+item.driver.id)" :src="item.driver.avatar"
						style="width: 116upx; height: 116upx;float: left; margin-top: 26upx; border-radius: 100upx;">
					</image>
					<view @click="$go('newdriver/index?id='+item.driver.id)" class="namelista">
						<view style="width: 100%;height: 50upx;margin-top:50upx;">
							<view style="float: left;">{{item.driver.driver_name}}</view>
							<view style="float: left; color: #777; font-size: 23upx;"> {{item.driver.plate_number}}</view>
							<view style="float: left; color: #777; font-size: 23upx;"> {{item.driver.vehicle.title}}</view>
						</view>
						<view style="float: left; color: #FE7002;">
							<view class="grid">
								<view v-for="(row,idx) in 5">
									<u-icon v-if="index==4" color="#D9D9D9" name="star-fill"></u-icon>
									<u-icon v-else color="#FD6901" name="star-fill"></u-icon>
								</view>
								{{item.driver.service_mark}}分
							</view>

						</view>

					</view>

					<view @click="collect(item.driver.id)" class="tubshou absolute" style="top:56upx;right:10upx;">
						
						<u-icon color="#FD6901" name="star-fill"></u-icon>
						<view class="clled">已收藏</view>
					</view>
				</view>


				<view style="width: 100%;overflow:hidden;" class="pt24 pb16">
					<view style="float: left;">
						<image src="../../static/now.png" style="width: 30upx; height: 40upx;float: left;"></image>
					</view>
					<view class="pb-12" style="float: left; color: #777; font-size: 28upx;">{{item.driver.address}}</view>
				</view>
			</view>



		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [],
				param: {
					limit: 10,
					page: 1
				},
				last_page: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			this.param.page++;
			if (this.param.page > this.last_page) {
				return;
			}
			this.getList();
		},
		methods: {
			collect(id) {
			  this.$api['post']('user/cancel-collect', {
					driverid:id
				}).then(res => {
					if (res.code == 200) {
					  this.$toast({title:"取消成功"});
					  this.getList();
					}
				});
			
			},
			getList() {
				this.$api['post']('user/get-start-driver', this.param).then(res => {
					if (res.code == 200) {
						if (this.param.page == 1) {
							this.last_page = res.data.last_page;
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);

						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6
	}

	.touxiang {
		width: 100%;

		float: left;
		background: #fff;
		border-radius: 16upx;
	}

	.namelista {
		width: 300upx;

		float: left;
		margin-left: 20upx;
	}

	.tubshou {
		width: 80upx;

		float: right;
		margin-left: 20upx;
	}

	.clled {
		width: 100%;
		height: 50upx;
		float: left;
		margin-top: 15upx;
		font-size: 24upx;
		color: #777;
	}
</style>